<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<header>
    <ul>
        <li>首页</li>
        <li>Class属性、复制元素</li>
        <li>DOM插入、插入现有内容</li>
        <li><a href="./Lisai.html"> DOM插入元素内、外</a></li>
        <li>DOM移除、替换</li>
        <li>通用属性、CSS属性</li>
    </ul>
</header>
<div class="container main">
    <div class="container main-1">
        <h1>DOM插入元素内、外</h1>
        <h2>一、DOM 插入现有元素内</h2>
        <p>
            .append(): 在每个匹配元素里面的末尾处插入参数内容<br/><br/>
            <!--换两行直接用p标签  不要用两个br-->
            .appendTo(): 将匹配的元素插入到目标元素的最后面<br/><br/>
            .html(): 获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容<br/><br/>
            .prepend(): 将参数内容插入到每个匹配元素的前面(元素内部)<br/><br/>
            .prependTo(): 将匹配的元素插入到目标元素的最前面<br/><br/>
            .text(): 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
        </p>
        <br/>
        <h3>1、.append()</h3>
        <p>
            定义: append() 方法在被选元素的结尾插入指定内容。<br/>
            语法：$(selector).append(content,function(index,html))<br/><br/>

            content取值：<br/>

            HTML 元素— $("p").append("<strong>Hello</strong>");<br/>

            jQuery 对象—  $("p").append( $("strong") );<br/>

            DOM 元素—$("p").append(document.createTextNode("Hello"));<br/><br/>

            function(index,html)：可选。规定返回待插入内容的函数。
        <!--这里警告，p标签里面不应该包含h1-h6标签-->
        </p>
        <div class="main-1-img">
            <img src="./img/append-1.png" alt=""/>
            <img src="./img/append-2%20.png" alt=""/>
        </div>
        <br/><br/>
        <h3>2、.appendTo()</h3>
        <p>
        定义：appendTo() 方法在被选元素的结尾插入 HTML 元素。<br/>
        语法：$(content).appendTo(selector)。<br/><br/>
        content取值：<br/>
        必需。规定要插入的内容（必须包含 HTML 标签）。<br/>
        selector：<br/>
        必需。规定把内容追加到哪个元素上。
        </p>
        <div class="main-1-img">
            <img src="./img/appendTo-1.png" alt=""/><br/><br/>
            <h3>区分：</h3>
            <p>
            &nbsp;&nbsp;.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同。对于.append(), 选择表达式在函数的前面，参数是将要插入的内容。对于.appendTo()刚好相反，内容在方法前面，无论是一个选择器表达式 或创建作为标记上的标记，它都将被插入到目标容器的末尾。

            </p>
        </div>
        <br/><br/>
        <h3>3、.html()</h3>
        <p>
        定义：html() 方法设置或返回被选元素的内容（innerHTML）。<br/>
        语法：返回内容：$(selector).html()<br/>

        &nbsp;&nbsp;&nbsp;设置内容：$(selector).html(content)<br/>

        &nbsp;&nbsp;&nbsp;使用函数设置内容：$(selector).html(function(index,currentcontent))<br/>
        </p>
        <div class="main-1-img">
            <img src="./img/html-2%20(2).png" alt=""/>
            <img src="./img/html-2%20(1).png" alt=""/>
        </div>
        <br/><br/>
        <h3>4、.prepend()</h3>
        <p>
        定 义：prepend() 方法在被选元素的开头插入指定内容。<br/>
        语法：$(selector).prepend(content,function(index,html))。<br/><br/>
        HTML 元素— $("p").append("<strong>Hello</strong>");<br/>

        jQuery 对象—  $("p").append( $("strong") );<br/>

        DOM 元素—$("p").append(document.createTextNode("Hello"));<br/><br/>

        function(index,html)：可选。规定返回待插入内容的函数。
        </p>
        <div class="main-1-img">
            <img src="./img/prepend-1.png" alt=""/>
        </div>
        <br/><br/>
        <h3>5、.prependTo()</h3>
        <p>
        定义：.prependTo() 方法在被选元素的开头插入 HTML 元素。<br/>
        语法：$(content).prependTo(selector)。<br/><br/>
        content取值：<br/>
        必需。规定要插入的内容（必须包含 HTML 标签）。<br/>
        selector：<br/>
        必需。规定把内容追加到哪个元素上。
        </p>
        <div class="main-1-img">
            <img src="./img/prependTo-1.png" alt=""/><br/><br/>
        </div>
        <br/><br/>
        <h3>6、.text()</h3>
        <p>
        定义：text() 方法设置或返回被选元素的文本内容。<br/>
        语法：返回文本内容：$(selector).text()<br/>

        &nbsp;&nbsp;&nbsp;设置文本内容：$(selector).text(content)<br/>

        &nbsp;&nbsp;&nbsp;使用函数设置文本内容：$(selector).text(function(index,currentcontent))<br/>
        </p><br/><br/><br/>

        <h2>二、DOM 插入现有元素外</h2>
        <p>
            .after()：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。<br/><br/>

            .before():根据参数设定，在匹配元素的前面插入内容。<br/><br/>

            .insertAfter():在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。<br/><br/>

            .insertBefore():在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。<br/><br/>
        </p><br/>
        <h3>1、.after()</h3>
        <p>
        定义：after() 方法在被选元素后插入指定的内容。<br/>
        语法：$(selector).after(content,function(index))
        </p>
        <br/>
        <h2>用法同.append()</h2>
        <div class="main-1-img">
            <img src="./img/after-1.jpg" alt=""/>
        </div>
        <br/><br/>
        <h3>2、.before()</h3>
        <p>
        定义：before() 方法在被选元素前插入指定的内容。<br/>
        语法：$(selector).before(content,function(index))。
        </p>
        <br/>
        <h2>用法同.after()</h2>
        <div class="main-1-img">
            <img src="./img/befour-1.png" alt=""/>
        </div>
        <br/><br/>
        <h3>3、.insertAfter()</h3>
        <p>
        定义：insertAfter() 方法在被选元素后插入 HTML 元素。<br/>
        语法：$(content).insertAfter(selector)。
        </p>
        <br/>
        <h2>用法同.after()</h2>
        <div class="main-1-img">
            <img src="./img/insertafter-1.png" alt=""/>
        </div>
        <br/><br/>
        <h3>4、.insertBefore()</h3>
        <p>
        定义：insertBefore() 方法在被选元素前插入 HTML 元素。<br/>
        语法：$(content).insertBefore(selector)。
        </p>
        <br/>
        <h2>用法同.insertAfter()</h2>
        <div class="main-1-img">
            <img src="./img/insertbefour.png" alt=""/>
        </div>
    </div>
</div>
</body>
</html>